import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output

"""
在前面的app3例子中，我们故意制造出的错误之一是不处理Input()默认的缺失值value，这里的错误展开来说是因为Input()部件value属性的默认值是None，
使得刚载入应用还未输入值时引发了回调中计算部分的逻辑错误。

类似这样的情况很多，可以通过给部件相应属性设置默认值或者在回调中写条件判断等方式处理，就像app2中那样，但如果这样的部件比较多，一个一个逐一处理还是比较繁琐，
而Dash中提供了阻止初始回调的特性，只需要在app.callback装饰器中设置参数prevent_initial_call=True即可
"""
app = dash.Dash(
    __name__,
    external_stylesheets=['css/bootstrap.min.css']
)

app.layout = html.Div(
    dbc.Container(
        [
            html.Br(),
            html.Br(),
            html.Br(),
            dbc.Row(
                [
                    dbc.Col(
                        dbc.Input(id='input1'),
                        width=4
                    ),
                    dbc.Col(
                        dbc.Label(id='output1'),
                        width=4
                    )
                ]
            )
        ]
    )
)


@app.callback(
    Output('output1', 'children'),
    Input('input1', 'value'),
    prevent_initial_call=True
)
def callback1(value):

    return int(value) ** 2

if __name__ == "__main__":
    app.run_server(debug=True)
